<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>iphone下载辅助</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/downloadjs/1.4.8/download.min.js"></script>
</head>
<style>
    input,
    select,
    button {
        margin: 0;
        padding: 0;
        border: none;
        outline: none;
    }

    .container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 16px;
    }

    input,
    select {
        height: 0.44rem;
        border-radius: 0.08rem;
        border: 1px solid #314755;
    }

    section::-ms-expand {
        display: none;
    }

    .btn-grad {
        width: 0.8rem;
        height: 0.44rem;
        background-image: linear-gradient(to right, #314755 0%, #26a0da 51%, #314755 100%)
    }

    .btn-grad {
        text-align: center;
        text-transform: uppercase;
        transition: 0.5s;
        background-size: 200% auto;
        color: white;
        box-shadow: 0 0 0.2rem #eee;
        border-radius: 0.1rem;
        display: block;
    }

    .btn-grad:hover {
        background-position: right center;
        /* change the direction of the change here */
        color: #fff;
        text-decoration: none;
    }
</style>
<script>
    -function () {
        function init() {
            let width = document.documentElement.clientWidth;
            let designWidth = 750;
            let rem = width / designWidth * 100; // 1rem -> 100px
            document.querySelector("html").style.fontSize = rem + "px";
        }
        document.addEventListener("resize", init);
        init();
    }();
</script>

<body>
    <div class="container">
        <input type="text" placeholder="请输入原链接">
        <select name="" id="">
            <option value="">默认</option>
            <option value="png">图片</option>
            <option value="mp4">视频</option>
        </select>
        <button class="btn-grad">下载</button>
    </div>
</body>
<script>
    let input = document.querySelector("input");
    let button = document.querySelector("button");
    let select = document.querySelector("select");
    button.addEventListener("click", () => {
        console.log(select.value, input.value)
        let url = input.value;
        let type = select.value;
        let fileName = Date.now();
        let fileType = "";
        if (url.replace(/\s/g, '') == "") {
            return alert("请输入链接");
        }
        if (type == "") {
            let result = location.href.match(/\.([A-Za-z]+|\d+)?$/);
            if (!result) return;
            fileName = timeStr + result[0];
        } else {
            fileName = timeStr + "." + result[0];
        }
        download(input.value, fileName);

    });
</script>

</html>